<template>
    <div id="app">
      <h1>添加商品</h1>
      <form @submit.prevent="addProduct">
        <label for="name">商品名称:</label>
        <input type="text" id="name" v-model="productName" required>
        <br>
        <label for="price">商品价格:</label>
        <input type="number" id="price" v-model="productPrice" required>
        <br>
        <button type="submit">添加商品</button>
      </form>
      <div v-if="message">{{ message }}</div>
      <button @click="getProducts">查看商品列表</button>
      <ul v-if="products.length > 0">
        <li v-for="product in products" :key="product.id">
          {{ product.name }} - ￥{{ product.price }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    data() {
      return {
        productName: '',
        productPrice: '',
        message: '',
        products: []
      };
    },
    methods: {
      addProduct() {
        const newProduct = {
          name: this.productName,
          price: this.productPrice
        };
        this.$axios.post('/api/addProduct', newProduct)
          .then(response => {
            this.message = response.data.message;
            this.productName = '';
            this.productPrice = '';
          })
          .catch(error => {
            this.message = `请求出错: ${error.message}`;
          });
      },
      getProducts() {
        this.$axios.get('/api/getProducts')
          .then(response => {
            this.products = response.data.data;
          })
          .catch(error => {
            this.message = `请求出错: ${error.message}`;
          });
      }
    }
  };
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>    